<template>
  <div class="wrapper">
    <h2 class="title">新增账号</h2>
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules2"
      ref="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="登录账号" prop="name">
        <el-input v-model="ruleForm2.name" auto-complete="off" placeholder="请输入登录账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="设置密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认设置密码"></el-input>
      </el-form-item>
      <div class="name-phone-wrapper">
        <el-form-item label="姓名" prop="realname" class="nameWrapper">
          <el-input v-model.number="ruleForm2.realname" placeholder="请输入姓名" class="nameClass"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" class="phoneWrapper">
          <el-input v-model.number="ruleForm2.phone" placeholder="请输入手机号" class="phoneClass"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="编辑权限" :rules="{required: true}"></el-form-item>
      <el-checkbox-group v-model="checkList" class="check-list" ref="checkbox" :max="2">
        <el-checkbox label="平台管理"></el-checkbox>
        <el-checkbox label="服务管理"></el-checkbox>
        <el-checkbox label="耗材管理"></el-checkbox>
        <el-checkbox label="设备管理" ></el-checkbox>
        <el-checkbox label="用户管理"></el-checkbox>
      </el-checkbox-group>
      <el-form-item class="button">
        <el-button type="primary"  size="mini" @click="cancle">取消</el-button>
        <el-button size="mini" style="background-color: rgb(27, 166, 135); color:#fff" @click.native="saveAccount">保存</el-button>
      </el-form-item>
    </el-form>
    <!-- <Pagition class="pagination"></Pagition> -->
  </div>
</template>
<script>
// import Pagition from '@/views/pagination/pagination'
import {createAdmin, editAuthority} from '@/api/user'
export default {
  data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      }
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        checked: false,
        checkList: [],
        ruleForm2: {
          name: '',
          pass: '',
          checkPass: '',
          realname: '',
          phone: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur', required:true}
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur', required:true }
          ],
          realname: [
            {message: '请输入姓名', trigger: 'blur', required:true }
          ],
          name: [{message: '请输入账号', trigger: 'blur', required:true}],
          phone: [{message: '请输入电话号码', trigger: 'blur', required:true}]
        }
      }
    },
    methods: {
      cancle() {
        this.$router.push({path: '/add'})
      },
      saveAccount() {
        let params = {}
        if (!this.ruleForm2.name === '' || !this.ruleForm2.realname === '' || !this.ruleForm2.phone === '' || !this.ruleForm2.checkPass === '') return
        params.name = this.ruleForm2.name
        params.realname = this.ruleForm2.realname
        params.phone = this.ruleForm2.phone
        params.password = this.ruleForm2.checkPass
        // console.log(params)
        createAdmin(params)
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
        //编辑权限
        // let indexArray = this.$refs.checkbox.$children.map((item, index) => {
        //   if (item.isChecked === true) {
        //     return index + 1
        //   }
        // })

        // let params2 = indexArray.join('')
        // if (params2.length === 0) return
        // editAuthority(params2, {name: this.ruleForm2.name})
        
      },
      submitForm(formName) {
        
      },
      resetForm(formName) {
      }
    },
    components: {
      // Pagition
    }
};
</script>
<style lang="scss" scoped>
.el-form /deep/ .el-input{
  width: 635px;
  height: 45px;
}
.nameClass{
    width: 353px !important;
    height: 43px !important;
    display: inline-block;
}
.phoneClass{
  width: 353px !important;
  height: 43px !important;
  display: inline-block;
}
.nameWrapper{
  display: inline-block;
}
.phoneClass{
  display: inline-block;
}
.wrapper{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .title{
    font-size: 14px;
  }
  .button{
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 0;
  }
  padding: 20px;
}
.name-phone-wrapper{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.check-list{
  margin-left: 40px;
}
.button /deep/ .el-form-item__content{
    margin-left: 20px !important;
  }
  .pagination{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
</style>